<template>
  <div class="enrollInfoContainer">
    <div
      class="dialog animated"
      :class="open ? 'fadeIn' : 'fadeOut'"
      v-show="show"
      :style="{ visibility: visible ? 'visible' : 'hidden' }"
    >
      <div class="panel animated" :class="open ? 'zoomIn' : ''">
        <div class="title">
          报名
          <div class="close" @click="cancel()"></div>
        </div>
        <div>
          <div class="step">
            <div class="step_text" style="padding-top: 0.24rem;line-height: 0.18rem;">
              <div>完善基本</div>
              <div>信息</div>
              <div class="step_OK">√</div>
            </div>
            <div class="step_line"></div>
            <div class="step_text" style="padding-top: 0.24rem;line-height: 0.18rem;">
              <div>选择</div>
              <div>缴费模式</div>
            </div>
            <div class="step_line"></div>
            <div class="step_text">
              <div>缴费</div>
            </div>
            <div class="step_line"></div>
            <div class="step_text">
              <div>完成</div>
            </div>
          </div>
        </div>
        <div class="base_info">
          <div class="base_info_title">基本信息</div>
          <div class="base_info_form">
            <el-row :gutter="10" class="from_row">
              <el-col :span="7">
                <div class="key">
                  <span class="redStar">*</span>学生姓名
                </div>
                <el-input class="value" clearable v-model="value1" placeholder="请输入学生姓名"></el-input>
              </el-col>
              <el-col :span="7">
                <div class="key">
                  <span class="redStar">*</span>出生年月
                </div>
                <el-date-picker type="date" placeholder="请选择出生年月" v-model="value1" class="value"></el-date-picker>
              </el-col>
              <el-col :span="7">
                <div class="key" style="width:0.8rem;">
                  <span class="redStar">*</span>性别
                </div>
                <el-radio-group v-model="value1" class="value" style="padding-top:0.1rem;">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="from_row">
              <el-col :span="7">
                <div class="key">证件类型</div>
                <el-select class="value" v-model="value1" clearable placeholder>
                  <el-option
                    v-for="item in list"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="7">
                <div class="key">证件号</div>
                <el-input class="value" clearable v-model="value1" placeholder></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="from_row">
              <el-col :span="7">
                <div class="key">国籍</div>
                <el-select class="value" v-model="value1" clearable placeholder>
                  <el-option
                    v-for="item in list"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="7">
                <div class="key">民族</div>
                <el-select class="value" v-model="value1" clearable placeholder>
                  <el-option
                    v-for="item in list"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="from_row">
              <el-col :span="7">
                <div class="key">计划入园日期</div>
                <el-date-picker type="date" placeholder v-model="value1" class="value"></el-date-picker>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="from_row">
              <el-col :span="24">
                <div class="key">
                  <span class="redStar">*</span>申请入院班级
                </div>
                <el-select class="value" v-model="value1" clearable placeholder="请选择学年">
                  <el-option
                    v-for="item in list"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  ></el-option>
                </el-select>
                <el-select
                  class="value"
                  style="margin-left:0.1rem;"
                  v-model="value1"
                  clearable
                  placeholder="请选择年级类型"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  ></el-option>
                </el-select>
                <el-select
                  class="value"
                  style="margin-left:0.1rem;"
                  v-model="value1"
                  clearable
                  placeholder="请选择班级"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="base_info">
          <div class="base_info_title">联系信息</div>
          <div class="base_info_form">
            <el-row :gutter="10" class="from_row">
              <el-col :span="7">
                <div class="key">监护人</div>
                <el-input class="value" clearable v-model="value1" placeholder></el-input>
              </el-col>
              <el-col :span="7">
                <div class="key">与孩子关系</div>
                <el-select class="value" v-model="value1" clearable placeholder>
                  <el-option
                    v-for="item in list"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="from_row">
              <el-col :span="7">
                <div class="key">
                  <span class="redStar">*</span>联系电话
                </div>
                <el-input class="value" clearable v-model="value1" placeholder="请输入联系电话"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="from_row">
              <el-col :span="7">
                <div class="key">证件类型</div>
                <el-select class="value" v-model="value1" clearable placeholder>
                  <el-option
                    v-for="item in list"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="7">
                <div class="key">证件号</div>
                <el-input class="value" clearable v-model="value1" placeholder="请输入证件号"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="from_row">
              <el-col :span="7">
                <div class="key">工作单位</div>
                <el-input class="value" clearable v-model="value1" placeholder></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="from_row">
              <el-col :span="24">
                <div class="key">家庭住址</div>
                <el-select class="value" v-model="value1" clearable placeholder="请选择省市区">
                  <el-option
                    v-for="item in list"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  ></el-option>
                </el-select>
                <el-input
                  class="value"
                  style="width:4rem;margin-left:0.1rem;"
                  clearable
                  v-model="value1"
                  placeholder
                ></el-input>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="btn_div">
          <div class="btn_cancel" @click="saveAndCancel()">保存并关闭</div>
          <div class="btn_sure" @click="nextStep()">下一步</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm, user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      value1: "",
      list: []
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
    },
    /**下一步 */
    nextStep() {
      vm.$emit("nextStep", "");
    },
    /**保存并关闭 */
    saveAndCancel() {
      vm.open = false;
      vm.$emit("cancel", "");
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 11);
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.$emit("cancel", "");
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 11);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style lang="scss">
.enrollInfoContainer {
  .step {
    overflow: hidden;
    padding-left: 0.2rem;
    .step_text {
      float: left;
      position: relative;
      text-align: center;
      font-size: 0.14rem;
      padding-top: 0.3rem;
      width: 0.9rem;
      height: 0.9rem;
      border-radius: 0.45rem;
      border: 0.01rem solid #409eff;
      line-height: 0.22rem;
      background: #f9f9f9;
    }
    .step_OK {
      position: absolute;
      right: 0.02rem;
      bottom: 0.16rem;
      width: 0.2rem;
    }
    .step_line {
      float: left;
      width: 0.4rem;
      height: 0.01rem;
      background: #409eff;
      margin: 0.44rem 0.06rem 0 0.06rem;
    }
    .step_detail {
      color: #409eff;
      font-size: 0.14rem;
      text-decoration: underline;
      cursor: pointer;
      margin: 0.2rem 0 0.3rem 0;
      padding-left: 6.2rem;
    }
  }
  .base_info {
    color: #666666;
    font-size: 0.16rem;
    margin-top: 0.2rem;
    padding: 0 0.2rem;
    overflow: hidden;
    .base_info_title {
      color: #999999;
      font-size: 0.2rem;
      width: 100%;
      margin-bottom: 0.1rem;
    }
    .base_info_form {
      overflow: hidden;
      .from_row {
        margin-bottom: 0.1rem;
      }
      .key {
        .redStar {
          color: red;
        }
        float: left;
        margin-right: 0.1rem;
        width: 1.14rem;
        padding-top: 0.06rem;
        text-align: right;
      }
      .value {
        width: 2rem;
        float: left;
      }
    }
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>





